import './index.less';
import { Grid } from 'react-vant';
import { staticModeList, deviceId } from '../../utils/staticData';
import { useEffect, useState } from 'react';
import SvgIcon from '../../components/SvgIcon/index';
import { debounce } from '../../utils/utils';

export default function Mode({ props, onLoopClick, onModeChange }: any) {
  const Hejia = (window as any).Hejia;

  const { mode, isOnline, status } = props;
  const [selectedItemId, setSelectedItemId] = useState<number | null>(null);

  useEffect(() => {
    setSelectedItemId(mode);
  }, [mode]);

  const handleModeClick = (id: number): void => {
    if (id === selectedItemId) return; // 最后一个空格，点击不处理
    onLoopClick(false);
    onModeChange(id);

    setSelectedItemId(id);

    debounce(() => {
      Hejia.setControlParam(
        {
          // deviceId,
          parameters: {
            param: [
              {
                name: 'mode',
                content: id
              }
            ]
          }
        },
        function () {
          // success, no response
          // setTimeout(() => {
          onLoopClick(true);
          // }, 1000);
          console.log('success');
        },
        function (msg: string, obj: any) {
          onLoopClick(true);
          console.log(msg + obj.resultCode + obj.resultCodeMessage);
        }
      );
    }, 0)();
  };

  return (
    <div className="mode">
      <div
        className={
          !isOnline || status === 1 || status === 2 || status === 3
            ? 'offline-title'
            : 'title'
        }
      >
        模式
      </div>
      <div className="mask-wapper">
        {(!isOnline || status === 1 || status === 2 || status === 3) && (
          <div className="mask"></div>
        )}
        <div className="mode-wapper">
          <Grid columnNum={3}>
            {staticModeList.map(item => (
              // react传递参数必须是回调函数
              <Grid.Item key={item.id} onClick={() => handleModeClick(item.id)}>
                <div
                  className={`item ${
                    item.id === selectedItemId ? 'active' : ''
                  }`}
                >
                  <SvgIcon
                    name={`${item.id}`}
                    size="46"
                    color={`${
                      !isOnline
                        ? 'rgba(0,0,0,0.4)'
                        : item.id === selectedItemId
                        ? '#00D8AF'
                        : 'rgba(0,0,0,0.8)'
                    }`}
                  />
                  <span
                    style={{
                      color: !isOnline
                        ? 'rgba(0,0,0,0.4)'
                        : item.id === selectedItemId
                        ? '#00D8AF'
                        : 'rgba(0,0,0,0.8)'
                    }}
                  >
                    {item.title}
                  </span>
                </div>
              </Grid.Item>
            ))}
          </Grid>
        </div>
      </div>
    </div>
  );
}
